
$class('MetroView', Widget, {

	// Members
	// default templates given.
	_templateFile: "thtml/metro/metroview.html",

	// Methods
	constructor: function()
	{
	},


	create: function(parent)
	{
		this.super(Widget.prototype.create, arguments);
		// You can use this._domNode.preappend(parent);
		//this._domNode.css('position', 'absolute');
		this._domNode.appendTo(parent);
		this.init();
		return this._domNode;
	},

	init: function()
	{
		var _this = this;
		this._domNode.delegate('div.metro-block', 'mousemove', function(){
			var items = _this._domNode.find('div.metro-block');
			items.attr('active', false);
			$(this).attr('active', true);
			items.each(function(){
				var actived = $(this).attr('active');
				if ( actived == 'false' )
				{
					$(this).css('opacity', 0.7);
				}
				else
				{
					$(this).css('opacity', 1);
				}

			});
		});

		this._domNode.delegate('div.metro-container', 'mouseleave', function(){
			_this._domNode.find('div.metro-block').css('opacity', 1);
		});
	},

	destroy: function()
	{
	},

	toString: function()
	{
		return "<Widget: 'MetroView'>";
	}
});
